<!--关于页面，介绍系统技术栈和功能说明-->
<template>
  <Layout>
    <div class="about-container">
      <el-card shadow="hover" class="about-card">
        <h2 class="about-title">关于系统</h2>
        
        <div class="about-content">
          <p>这是一个基于 Vue 3 + TypeScript + Element Plus 的登录系统示例。</p>
          
          <el-divider content-position="left">技术栈</el-divider>
          
          <el-row :gutter="20" class="tech-stack">
            <el-col :span="8">
              <el-card class="tech-card">
                <div class="tech-icon">Vue 3</div>
                <div class="tech-desc">用于构建用户界面的渐进式框架</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="tech-card">
                <div class="tech-icon">TypeScript</div>
                <div class="tech-desc">提供类型安全的 JavaScript 超集</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="tech-card">
                <div class="tech-icon">Element Plus</div>
                <div class="tech-desc">基于 Vue 3 的 UI 组件库</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="tech-card">
                <div class="tech-icon">Vue Router</div>
                <div class="tech-desc">Vue.js 官方路由管理器</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="tech-card">
                <div class="tech-icon">Pinia</div>
                <div class="tech-desc">Vue 的状态管理库</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="tech-card">
                <div class="tech-icon">Axios</div>
                <div class="tech-desc">用于发送 HTTP 请求的库</div>
              </el-card>
            </el-col>
          </el-row>
          
          <el-divider content-position="left">功能说明</el-divider>
          
          <ul class="features-list">
            <li>完整的用户登录/登出功能</li>
            <li>基于角色的权限控制</li>
            <li>表单验证与错误处理</li>
            <li>响应式布局设计</li>
            <li>用户状态管理</li>
          </ul>
        </div>
      </el-card>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import Layout from '../components/Layout.vue'
import { onMounted } from 'vue'
import { useUserStore } from '../stores/user'

// 用户状态
const userStore = useUserStore()

onMounted(() => {
  // 如果没有用户信息，获取一下
  if (userStore.isLoggedIn && !userStore.user) {
    userStore.fetchCurrentUser()
  }
})
</script>

<style scoped>
.about-container {
  max-width: 1000px;
  margin: 0 auto;
}

.about-card {
  padding: 20px;
}

.about-title {
  color: #1E293B;
  margin-top: 0;
  margin-bottom: 20px;
}

.about-content p {
  line-height: 1.6;
  color: #475569;
  margin-bottom: 20px;
}

.tech-stack {
  margin-bottom: 30px;
}

.tech-card {
  text-align: center;
  padding: 20px;
  height: 100%;
  transition: transform 0.3s;
}

.tech-card:hover {
  transform: translateY(-5px);
}

.tech-icon {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #165DFF;
}

.tech-desc {
  font-size: 14px;
  color: #64748B;
}

.features-list {
  padding-left: 20px;
  color: #475569;
}

.features-list li {
  margin-bottom: 10px;
  line-height: 1.6;
}
</style>
